<script setup lang="ts">
// https://mrhj.gitee.io/form-generator/#/ 表单设计器
import { ref, reactive, onMounted, defineEmits } from "vue";
import type { FormRules } from "element-plus";
import { createKnowledge, Knowledge } from "@/api/lms/knowledge";
import InfoFilled from "@iconify-icons/ep/info-filled";

const emit = defineEmits(["onSearchEnv"]);
const onSearchTable = () => {
  emit("onSearchEnv");
};

const KnowledgeForm = ref<Knowledge>();
const title = ref("");
const isAdd = ref(true);
const dialogVisible = ref(false);

const showdialogForAdd = (t: string) => {
  title.value = t;
  isAdd.value = true;
  KnowledgeForm.value = {
    id: "",
    name: "",
    describe: "",
    embeddingModel: "milkey/m3e",
    chunkSize: 500,
    chunkOverlap: 100,
    creator: "",
    createdAt: ""
  };
  dialogVisible.value = true;
};
const showdialogForEdit = (e: any, t: string) => {
  title.value = t;
  isAdd.value = false;
  dialogVisible.value = true;
};

const rules = reactive<FormRules>({
  username: [
    {
      required: true,
      message: "请输入用户账号",
      trigger: "blur"
    }
  ],
  nickname: [],
  status: [
    {
      required: true,
      message: "状态不能为空",
      trigger: "change"
    }
  ],
  email: [],
  roleIds: [
    {
      required: true,
      type: "array",
      message: "请至少选择一个角色",
      trigger: "change"
    }
  ],
  deptId: [
    {
      required: true,
      message: "请选择用户所属部门",
      trigger: "change"
    }
  ]
});

onMounted(() => {});

const onSubmit = () => {
  console.log(KnowledgeForm.value);
  if (isAdd.value) {
    createKnowledge(KnowledgeForm.value).then(() => {
      dialogVisible.value = false;
      onSearchTable();
    });
  } else {
    console.log("update");
  }
};

defineExpose({
  showdialogForAdd,
  showdialogForEdit
});
</script>

<template>
  <el-dialog v-model="dialogVisible" :title="title">
    <el-form
      ref="elForm"
      :model="KnowledgeForm"
      :rules="rules"
      label-width="100px"
    >
      <el-form-item label="知识库名称" prop="name">
        <el-input
          v-model="KnowledgeForm.name"
          placeholder="请输入知识库名称"
          :maxlength="50"
          show-word-limit
          clearable
        />
      </el-form-item>
      <el-form-item prop="embeddingModel">
        <template #label>
          嵌入模型
          <el-tooltip
            content="技术模块，请参考文档填写或者联系管理员获取！"
            placement="top"
          >
            <IconifyIconOffline
              :icon="InfoFilled"
              style="margin-top: 10px; margin-left: 5px"
            />
          </el-tooltip>
        </template>
        <template #default>
          <el-input
            v-model="KnowledgeForm.embeddingModel"
            placeholder="技术参数不要乱写！eg:milkey/m3e"
            :maxlength="50"
            show-word-limit
            clearable
            :style="{ width: '100%' }"
          />
        </template>
      </el-form-item>
      <el-form-item>
        <template #label>
          分片大小
          <el-tooltip content="指定每个文档分片的大小" placement="top">
            <IconifyIconOffline
              :icon="InfoFilled"
              style="margin-top: 10px; margin-left: 5px"
            />
          </el-tooltip>
        </template>
        <template #default>
          <el-input-number
            v-model="KnowledgeForm.chunkSize"
            :min="0"
            clearable
            :style="{ width: '100%' }"
          />
        </template>
      </el-form-item>
      <el-form-item>
        <template #label>
          重载大小
          <el-tooltip
            content="文件切割时会前后延展的长度，可以在一定程度上解决语义截断问题！"
            placement="top"
          >
            <IconifyIconOffline
              :icon="InfoFilled"
              style="margin-top: 10px; margin-left: 5px"
            />
          </el-tooltip>
        </template>
        <template #default>
          <el-input-number
            v-model="KnowledgeForm.chunkOverlap"
            :min="0"
            clearable
            :style="{ width: '100%' }"
          />
        </template>
      </el-form-item>
      <el-form-item label="描述" prop="describe">
        <el-input
          v-model="KnowledgeForm.describe"
          placeholder=""
          :maxlength="20"
          show-word-limit
          clearable
          :style="{ width: '100%' }"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="onSubmit"> 提交 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped></style>
